<template>
  <div class="main">
    <div class="swiper-body">
      <div class="swiper-hot">
        <!-- 1 -->
        <div class="hot-top">
          <h2 class="hot-text"></h2>
        </div>
      </div>
    </div>
    <swiper
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      loop
      :allowTouchMove="(allowTouchMove = false)"
      :pagination="{
        clickable: false,
      }"
    >
      <div class="swiper-button-prev"></div>

      <swiper-slide class="swiper-slide" v-for="item in BannerList">
        <div class="hot-dvd-list">
          <ul class="dvd-list">
            <li class="dvd-item" v-for="key in item">
              <div class="dvd-box">
                <div class="dvd-box-bottom">
                  <a>
                    <img :src="key.imageUrl" />
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </swiper-slide>

      <!-- 下一页 -->
      <div class="swiper-button-next"></div>

      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->

      <!-- <div class="swiper-button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'Wouderful',
}
</script>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'

import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from 'swiper'

import 'swiper/swiper-bundle.css'
import { onMounted, ref } from '@vue/runtime-core'
import { getBanner } from '../../../api/Home'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])

const BannerList = ref([])

onMounted(async () => {
  const result = await getBanner()
  if (result.code === 200) {
    var arr1 = []
    var arr2 = []
    result.banners.forEach((item, index) => {
      if (index % 2 === 0) {
        arr1.push(arr2)
        arr2 = []
      }
      arr2.push({
        imageUrl: item.imageUrl,
      })
    })
  }
  arr1.push(arr2)
  arr1.shift()
  BannerList.value = arr1
})
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 418px;
  background: url('../img/bg.png') 50% 0 repeat-x;
}
.swiper-body {
  width: 1200px;
  margin: 0px auto;
}
/* 1-start */

.swiper-hot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .hot-top {
    margin-top: 50px;
    width: 100%;

    .hot-text {
      background-image: url('../img/index_tit5.png');
      background-size: 100%;
      display: block;
      margin: 0 auto;
      width: 196px;
      height: 40px;
      background-position: 0 -100px;
    }
  }
}

.hot-dvd-list {
  overflow: hidden;
  margin: 0 auto;
  width: 1200px;
  box-sizing: border-box;
  .dvd-list {
    overflow: hidden;
    margin-top: 50px;
    margin-bottom: 35px;
  }
  .dvd-item {
    display: inline-block;
    margin-right: 10px;
  }
  .dvd-box {
    box-sizing: border-box;
  }
  .dvd-box-bottom {
    position: relative;
    overflow: hidden;
  }
  .dvd-box-bottom img {
    width: 590px;
    height: 236px;
  }

  .dvd-box h4 {
    font-weight: normal;
    font-size: 14px;
    height: 22px;
  }
  .dvd-box h4:hover {
    color: #31c27c;
  }
}
/* 1-end */
</style>
